<template>
	<view class="box-border">
		<!-- <u-sticky bgColor="#fff">
			<u-tabs :list="title" :scrollable='false' @click="click"></u-tabs>
		</u-sticky> -->
		<view class="live-list page box-border ">
			<view class="title">
				
			</view>
			<view class="">
				<video :src="liveList.url"></video>
			</view>
		</view>
		<u-empty text="暂无列表哦~~" mode="list" v-if="liveList==null" margin-top='50'></u-empty>
	</view>
</template>

<script>
	import {teachingVideo} from '@/request/api.js'
	export default {
		data() {
			return {
				liveList: null,
				last_page:1,
				page:1
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList(){
				teachingVideo({
					page:this.page
				}).then(res=>{
					// console.log(res)
					if(res.code == 1){
							this.liveList=res.data
					}
					
				
				})
			}
		},
		onReachBottom() {
			if(this.page<this.last_page){
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title-au{
		line-height: 34upx;
		color: #FFFFFF;
		position: absolute;
		left: 20upx;
		top: 80%;
		width: calc(100% - 40upx);
		font-size: 28upx;
	}
	.title-n{
		position: absolute;
		left: 20upx;
		bottom: 30%;
		width: calc(100% - 40upx);
		line-height: 40upx;
		color: #FFFFFF;
	}
	.pt-ab {
		width: 130upx;
		height: 50upx;
		left: 0upx;
		top: 50upx;
		border-radius: 0 25upx 25upx 0;
		z-index: 9;
		background: linear-gradient(270deg, #F8A470 0%, #F3DDA2 100%);
		image{
			width: 26upx;
			height: 26upx;
			margin-left: 10upx;
			margin-right: 10upx;
		}
		font-style: normal;
		font-size: 24upx;
		color: #FFFFFF;
	}
	.live-list {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		.title{
			margin-bottom: 20px;
		}

	}

	.live-img {
		width: 100%;
		height: 400upx;
		border-radius: 16upx;
		aspect: ratio 4upx / 3upx;
	}

	.title-item {
		color: $title-color;
	}

	.active {
		color: $common-color !important;
		position: relative;
	}

	.active::after {
		content: '';
		position: absolute;
		background: $common-color;
		width: 70upx;
		height: 2upx;
		bottom: -10upx;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 40upx;
	}

	.current {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		text-align: center;
	}
</style>
